<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>用户登录</title>
</head>
<body>
<div style="text-align:center">
    <h1>用户登录</h1>
    <form action="/login" method="post" id="loginForm">
        <input type="text" name="uname" placeholder="用户名" id="uname"><br>
        <input type="password" name="upwd" placeholder="密码" id="upwd"><br>
        <span id="msg" style="font-size: 12px; font-weight: bold; color: red;"></span><br>
        <button type="button" id="loginBtn">登录</button>
        <button type="button">注册</button>
    </form>
</div>

</body>
<%-- 引入jquery的js文件 --%>
<script src="js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
    $("#loginBtn").click(function(){
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();

        // 判断是否为空
        if(isEmpty(uname)){
            $("#msg").text("用户名不能为空");
            return;
        }
        if(isEmpty(upwd)){
            $("#msg").text("密码不能为空");
            return;
        }
        // 如果不为空，则提交表单
        $("#loginForm").submit();

    });
    // 判断空值函数
    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>
